<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">`
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>未来头条-登录</title>
    <link rel="icon" href="../static/img/default_avatar/2e6ced4da4ff5a32c7f1866bff276450.png"
        th:href="@{/img/default_avatar/2e6ced4da4ff5a32c7f1866bff276450.png}" type="image/png">

    <link rel="stylesheet" href="../static/css/login/login.css" th:href="@{/css/login/login.css}">
    <link rel="stylesheet" href="../static/iconFont/iconfont.css" th:href="@{/iconFont/iconfont.css}">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <span class="alert" th:if="${message}" th:text="${message}" id="alertMessage" style="color: red;"></span>
    <span class="alerts" style="display: none;color:red"></span>
    <div class="mainPage-nav">
        <div class="nav-con">
            <div class="nav-left">
                <span class="nav-lef-wei">未来</span>
                <span class="nav-lef-text">头条</span>
            </div>
            <div class="nav-right">首页</div>
        </div>
        <div class="nav-clear"></div>
    </div>
    <div class="container">
        <div class="center">
            <div class="container-left">
                <div class="illustrations">
                    <img src="/img/892b89bb36d439c2b58ac1e291046721.png" alt="登录图片">
                </div>
            </div>
            <div class="container-right">
                <form class="login-container" th:action="@{/user/login}" th:method="post">
                    <h2 id="login-title">邮箱登录</h2>

                    <label for="login-email"></label>
                    <div class="form-group">
                        <div class="error-message" id="login-email-format-Error">
                            <i class="iconfont icon-xiaochahao"></i>
                            <span class="Login-error-text">请输入正确的邮箱格式</span>
                        </div>
                        <input type="text" id="login-email" placeholder="邮箱" name="email" th:value="${email}">
                    </div>
                    <label for="login-password"></label>
                    <div class="form-group">
                        <div class="error-message" id="login-passwordEmpty">
                            <i class="iconfont icon-xiaochahao"></i>
                            <span id="Login-error-text">请输入您的密码</span>
                        </div>
                        <div class="write-password">
                            <input type="password" id="login-password" placeholder="密码" name="password">
                            <span class="Eyeclose"><i class="iconfont icon-eye-close"></i></span>
                            <span class="Eyeopen"><i class="iconfont icon-eye_open"></i></span>
                        </div>
                    </div>
                    <div class="checkbox" style="color:black">
                        <input type="checkbox" id="login-terms" name="terms">
                        <label for="login-terms">我已阅读并同意《用户协议》和《隐私政策》</label>
                    </div>
                    <button class="btn-login" type="submit">登录</button>
                    <div class="little-text">
                        <span class="forget-password">忘记密码</span>
                        <span id="register" th:href="@{/user/register}">点击注册</span>
                    </div>
                    <!--                <div class="social-login">-->
                    <!--                    <div class="social-login-text">-->
                    <!--                        <span class="other-login">第三方登录</span>-->
                    <!--                    </div>-->
                    <!--                    <div class="icon">-->
                    <!--                        <a href="#"><i class="iconfont icon-weixin"></i></a>-->
                    <!--                        <a href="#"><i class="iconfont icon-QQ"></i></a>-->
                    <!--                        <a href="#"><i class="iconfont icon-zhifubao"></i></a>-->
                    <!--                    </div>-->
                    <!--                </div>-->
                </form>
            </div>
        </div>
    </div>
    <div class="forget-password-background"></div>
    <div class="forget-password-container">
        <h2 id="forget-password-title">重置密码</h2>
        <i class="iconfont icon-quxiao"></i>
        <label for="forget-password-email"></label>
        <div class="input-group">
            <div class="error-message" id="forget-password-email-format-Error">
                <i class="iconfont icon-xiaochahao"></i>
                <span class="forget-password-email-format-text">邮箱格式不正确</span>
            </div>
            <div class="write-username">
                <input type="text" placeholder="邮箱" id="forget-password-email" name="email">
            </div>
        </div>
        <label for="forget-password-code"></label>
        <div class="input-group">
            <div class="error-message" id="forget-password-code-Error">
                <i class="iconfont icon-xiaochahao"></i>
                <span class="forget-password-code-Error-text">请输入验证码</span>
            </div>
            <div class="write-code">
                <input type="text" placeholder="验证码" id="forget-password-code" name="code" th:value="${code}">
                <!-- 这里只有设置为button,才能使用disable属性,用于启动或禁用按钮 -->
                <button id="forget-password-getCode" type="button">
                    点击发送验证码
                </button>
            </div>
        </div>
        <label for="forget-password-newpassword"></label>
        <div class="input-group">
            <div class="error-message" id="forget-password-newpassword-Error">
                <i class="iconfont icon-xiaochahao"></i>
                <span class="forget-password-Error-text">密码长度需在6-64位,需包含数字,字母大小写,字符</span>
            </div>
            <div class="write-newpassword">
                <input type="password" placeholder="设置新密码" id="forget-password-newpassword" name="password">
                <span class="Eyeclose"><i class="iconfont icon-eye-close"></i></span>
                <span class="Eyeopen"><i class="iconfont icon-eye_open"></i></span>
            </div>
        </div>
        <label for="forget-password-rewpassword"></label>
        <div class="input-group">
            <div class="error-message" id="forget-password-rewpassword-Error">
                <i class="iconfont icon-xiaochahao"></i>
                <span class="forget-password-rewpassword-Error-text">与您设置的密码不一致,请重新输入</span>
            </div>
            <div class="write-repassword">
                <input type="password" placeholder="再次输入新密码" id="forget-password-rewpassword">
                <span class="Eyeclose"><i class="iconfont icon-eye-close"></i></span>
                <span class="Eyeopen"><i class="iconfont icon-eye_open"></i></span>
            </div>
        </div>

        <div class="checkbox" style="color:black">
            <input type="checkbox" id="forget-password-terms">
            <label for="forget-password-terms">我已阅读并同意《用户协议》和《隐私政策》</label>
        </div>
        <input type="submit" class="commit-change" value="确认修改">
    </div>
    <script src="../static/js/login.js" th:src="@{/js/login.js}"></script>
</body>

</html>